<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>商城首页- 模块- 顶部导航条右栏</title>
  <link rel="stylesheet" type="text/css" href="css/ShopCartStyle.css" />
  <link type="text/css" rel="stylesheet" href="css/MyCss.css" />
  <link type="text/css" rel="stylesheet" href="css/right-bar.css" />
 </head>
 <body>
	<!-- start shop car -->
	<!-- 这里用到的模态框的技术 -->
	<div class="shopcar">
		<div class="shopcarcnt">
			<!-- shopcarclick 收进、出按钮 -->
			<div class="shopcarclick" id="shopcarclick">
				<ul class="nolist">
					<!--<i class="shopclick_ico"></i><i class="p-infor"></i><i class="goods-colle"></i><i class="my-food"></i>-->
					<li class="clicknav" title="会员">
						<img src="image/p_infor.png" width="25px" height="25px" alt=""/>
						<!--
						未登录
						<div class="bar-nologin">
							<div class="bar-in-com-nologin">
								<label>商城会员</label>
							</div>
						</div>
						-->
						<div class="bar-login">
							<div class="bar-in-com">
								<!--头像信息-->
								<label>
									<div class="head-pi">
										<img src="E:/tako/tako.jpg" width="50px" height="50px" />
									</div>
									<div class="menber-name">
										<label>大购物狂</label>
										<label>
											<img title="蓝砖会员" src="image/person/Member3.png" width="20px" height="20px" />
										</label>
									</div>
									<div class="menber-integral">
										积分:25
									</div>
								</label>
							</div>
						</div>
					</li>
					<li class="clicknav car-bt" title="购物车">
						<img src="image/car2.png" width="24px" height="24px" alt=""/>
						<!--
						未登录
						<div class="bar-nologin">
							<div class="bar-in-com-nologin">
								<label>未登录哦</label>
							</div>
						</div>
						-->
					</li>
					<li class="clicknav" title="商品收藏">
						<img src="image/colle1.png" width="25px" height="25px" alt=""/>
						<!--未登录
						<div class="bar-nologin">
							<div class="bar-in-com-nologin">
								<label>未登录哦</label>
							</div>
						</div>
						-->
						<!--
						收藏为空
						<div class="bar-login bar-login-null">
							<div class="bar-in-com-nologin">
								<label>空的哦</label>
							</div>
						</div>
						<div class="bar-login">
							<div class="bar-in-com">
							</div>
							<div class="bar-in-bom">
								<label>查看更多收藏</label>
							</div>
						</div>
						-->
						<div class="bar-login bar-login-null">
							<div class="bar-in-com-nologin">
								<label>空的哦</label>
							</div>
						</div>
					</li>
					<li class="clicknav" title="个人足迹">
						<img src="image/food.png" width="25px" height="25px" alt=""/>
						<!--
						未登录
						<div class="bar-nologin">
							<div class="bar-in-com-nologin">
								<label>未登录哦</label>
							</div>
						</div>
						-->
						<div class="bar-login">
							<div class="bar-in-com">
								<ul class="nolist">
									<li>
										<div class="lictn" data-id="">
											<label class="goodspho">
												<img src='E:/tako/tako.jpg' width="55" height="60" />
											</label>
											<label class="colledes">
												<label class="colle-infor">
													<label class="colle-name">黑白条纹打底衫</label>
													<label class="colle-price"><del>110</del>120</label>
												</label>
											</label>
										</div>
									</li>
								</ul>
							</div>
							<div class="bar-in-bom">
								<label>查看更多</label>
							</div>
						</div>
					</li>
				</ul>
			</div>
			

			<!-- list_cont -->
			<div class="list_cont">
				<!-- shopping_head 标题 -->
				<div class="shopping_head">购物车</div>

				<!-- shopping_list 购物清单 -->
				<div class="shopping_list">
					<div class="shop_list_cnt">
						<!-- 单个物品 -->	
						<ul class="nolist">
							<li>
								<div class="lictn" data-id="">
									<label class="goodspho">
										<img src='E:/tako/tako.jpg' width="55" height="60" />
									</label>
									<label class="goodsdes">
										<label class="goods-name">
											<span>黑白条纹打底衫</span>
										</label>
										<label class="goods-infor">
											<!--
											<label class = "goods-name">衣服</label>
											-->
											<label class="goods-size">L</label>&nbsp;&nbsp;&nbsp;&nbsp;
											<label class="goods-num">2</label>&nbsp;&nbsp;&nbsp;&nbsp;
											<label class="goods-price">120</label>
										</label>
									</label>
								</div>
							</li>
							<li>
								<div class="lictn" data-id="">
									<label class="goodspho">
										<img src='E:/tako/tako.jpg' width="55" height="60" />
									</label>
									<label class="goodsdes">
										<label class="goods-name">
											<span>黑白条纹打底衫</span>
										</label>
										<label class="goods-infor">
											<!--
											<label class = "goods-name">衣服</label>
											-->
											<label class="goods-size">L</label>&nbsp;&nbsp;&nbsp;&nbsp;
											<label class="goods-num">2</label>&nbsp;&nbsp;&nbsp;&nbsp;
											<label class="goods-price">120</label>
										</label>
									</label>
								</div>
							</li>
							<li>
								<div class="lictn" data-id="">
									<label class="goodspho">
										<img src='E:/tako/tako.jpg' width="55" height="60" />
									</label>
									<label class="goodsdes">
										<label class="goods-name">
											<span>黑白条纹打底衫</span>
										</label>
										<label class="goods-infor">
											<!--
											<label class = "goods-name">衣服</label>
											-->
											<label class="goods-size">L</label>&nbsp;&nbsp;&nbsp;&nbsp;
											<label class="goods-num">2</label>&nbsp;&nbsp;&nbsp;&nbsp;
											<label class="goods-price">120</label>
										</label>
									</label>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<!-- shopping_result 结算结果 -->
				<div class="shopping_result">
					<div class="RMB_result">
						<span>合计</span>
						<span class="RMB_NUM">4000</span>
						<span>元</span>
					</div>
					<div class="result_button">
						<input type="button" value="结算" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- shop car end -->
	<script src="js/MyjsV0-3.js"></script>
	<script>

	/* start shop_cart */
	/*设置list容器的高度 变化的*/
	$(".shopping_list")[0].style.height=(window.innerHeight-(48+60)) + "px" ;
	$(".nolist")[0].style.marginTop=(window.innerHeight/2-60)+"px";
	window.onresize = function (){
		$(".shopping_list")[0].style.height=(window.innerHeight-(48+60)) + "px" ;
		topVal = (window.innerHeight/2-60) ;
		$(".nolist")[0].style.marginTop= topVal +"px" ;
		
	}
	/* 延时执行 */
	setTimeout(function(){
		$(".shopcar")[0].style.display = "block" ;
		in_out() ;
	},500) ;

	var ani2 = new AnimateRoutine({
		aniEle:$(".shopcar")[0],	//动画元素
		aniMax:282,		//可以代表元素高的最大值或者元素宽的最小值
		aniMin:32,
		type:"left",
		useAddVal:false,
		closeAll:false,
		aniTime:4,
	}) ;
	var FLAG_1 = true ;		//true 可以打开 同时还控制这ani1，ani3，ani4
	function in_out(){
		/*
		2345浏览器的移进移出速度问题
		*/
		//判断是否允许移进移出
		
		var bool = false ;		//true 可以清除
		//自动收进去计时器名称
		var TIME_OUT ;
		//再无其他影响的条件下3秒自动移进
		auto_in() ;
		$(".car-bt")[0].onclick=function(){
			if(FLAG_1){
				FLAG_1 = false ;
				ani2.run() ;
				//再无其他影响的条件下3秒自动移进
				auto_in() ;
			}
			else{
				FLAG_1 = true ;
				ani2.next() ;
			}
		}
		
		//自动移进
		function auto_in(){
			if(!FLAG_1){
				bool = true ;
				TIME_OUT = setTimeout(function(){
					ani2.next() ;
					FLAG_1 = true ;
				},3000) ;
			}
		}
		//鼠标移进禁止缩进，移出允许移进
		$(".shopcar")[0].onmouseover = function (){
			if(!FLAG_1){
				if(bool){
					bool = false ;
					clearTimeout(TIME_OUT) ; 
				}
			}
		}
		$(".shopcar")[0].onmouseout = function(){
			if(!FLAG_1){
				if(!bool){
					auto_in() ;
				}
			}
		}

	}
	
	//42
	var ani1 ;
	/*
	var ani1 = new AnimateBevelAngle({
		aniEle:$(".bar-my-infor")[0],	//动画元素
		aniMax:32,		//可以代表元素高的最大值或者元素宽的最小值
		type:"L_B",	//[right、top、bottom]
		widthVal:120,
		initTop:224,
		initLeft:-2,
		aniTime:4,
	}) ;
	*/
	

	//委托事件
	$(".other-cnt")[0].onclick = function(e) {
		if(e.target.tName() == "i"){
			var parentE = e.target.parent("label") ;
			if(parentE != undefined){
				if(parentE.attr("class") == "label_close")
					liHoverFun2.nowAniNext() ;
			}
		}
	}

	//右栏弹窗方法
	function LiHoverFun2(data){
		LiHoverAndAnimate.call(this, data) ;
		new InheritSupport().support(this, new LiHoverAndAnimate(data)) ;
		var paths = ["p_infor", "car2", "colle1", "food"] ;
		var nowData ;
		//设置上一次的元素 
		//e {i:preIndex, preEle:preElement, preAni:preAni}
		this.preFun = function (e){
			e.preEle.$("img")[0].src = "image/" + paths[e.i] + ".png" ;
			if(e.i == 0){
				e.preAni.next() ;
				if(e.i != 1){}
			}
		}
		//设置当前的元素 
		//e {i:i, nowEle:currentLiElement, nowAni:currentAni}
		this.nowFun = function (e){
			e.nowEle.$("img")[0].src = "image/" + paths[e.i] + "_hover.png" ;
			nowData = e ;
			if(e.i == 0){
				if(FLAG_1)
					e.nowAni.run() ;
				if(e.i != 1){}
			}
			
		}
		this.nowAniNext = function(){
			nowData.nowEle.$("img")[0].src = "image/" + paths[nowData.i] + ".png" ;
			nowData.nowAni.next() ;
		}
	}
	
	//根据滑入打开自己同时关掉前者
	/**
	按钮启动容器
	ul	按钮        
		li
		li
		li
	ul	容器
		li
		li
		li
	必须是li和相应的动画，根据动画判断动作
	aniArr 动画					必须
	divElements 动画盒子		必须 任意类型的元素数组集
	liElements  li元素			必须
	i 可以自定义 默认为零
	len可以自定  默认为			liElements.length
	*/
	function LiHoverAndAnimate(data) {
		this.NullException = function(obj, objName){
			if(obj == undefined)
				throw new Error("参数" + objName + "不能为空 == " + obj) ;
		}
		this.NullException(data.aniArr, "aniArr") ;
		this.NullException(data.divElements, "divElements") ;
		this.NullException(data.liElements, "liElements") ;
		data.i = data.i || 0 ;
		data.len = data.len || data.liElements.length ;
		var oneSelf = this ;
		
		//设置上一次的元素 
		//e {i:preIndex, preEle:preElement, preAni:preAni}
		this.preFun = function (e){}

		//设置当前的元素 
		//e {i:i, nowEle:currentLiElement, nowAni:currentAni}
		this.nowFun = function (e){}
		this.doReady = function (){
			var preAni ;			//上一个动画
			var preElement ;		//上一个li元素
			var preIElement ;		//上一个i元素
			var preIndex ;
			for(var i = data.i; i < data.len; i ++){
				(function(i){
					var currentLiElement = data.liElements[i] ;	//li元素
					var currentAni = data.aniArr[i] ;
					currentLiElement.onmouseover = function(e){
						//setHover(iElement, currentLiElement, arr[i]) ;
						if(currentAni != preAni && preAni != undefined){
							oneSelf.preFun({i:preIndex, preEle:preElement, preAni:preAni})
							setPreVal(currentLiElement, currentAni, i) ;
							oneSelf.nowFun({i:i, nowEle:currentLiElement, nowAni:currentAni})
						}
						if(preAni == undefined){
							oneSelf.nowFun({i:i, nowEle:currentLiElement, nowAni:currentAni})
							setPreVal(currentLiElement, currentAni, i) ;
						}
					}
				})(i) ;
			}
			//设置上一个参数 【上一个动画，上一个li元素 上一个i】
			function setPreVal(element, ani, i){
				preAni = ani ;
				preElement = element ;
				preIndex = i ;
			}
		}
	}
	/* shop_cart end */


	</script>
 </body>
</html>